<script>
export default {
  name: "Context"
}
</script>

<template>
  <transition enter-active-class="animated__animated animate__fadeIn">
<div class="border  rounded-2xl w-full  mt-2 mb-10 flex flex-col shadow-2xl">

  <div class="h-1/6 rounded-2xl">
    <slot name="userPic"></slot>
    <slot name="category"></slot>
  </div>
  <div class="h-4/6 0 flex flex-col rounded-2xl">
    <div class="h-1/6 bg-gray-400/10 flex items-center text-xl text-gray-600">
       <slot name="title" class="text-2xl"></slot>
    </div>
    <div class="h-5/6 ">
      <slot name="content">
      </slot>
    </div>
  </div>
  <div class="h-1/6  flex ">
    <slot name="encourage"></slot>

  </div>
</div></transition>
</template>

<style scoped>

</style>